<template>
	<a-card hoverable style="width: calc(50vw);margin-left: 10%;">
		<template #title>
			个人资料
		</template>
		<a-form ref="myUserForm" :size="userForm.size" :model="userForm" @submit-success="handleSuccess">
			<a-space :size="20" direction="vertical" fill>
				<a-card style="width: 100%;height: auto;">
					<template #title>
						<a-typography-text type="primary">
							昵称
						</a-typography-text>
					</template>
					<a-form-item class="itemStyle" field="nickName" label="昵称" :show-colon="true" :rules="[{required:true,message:'昵称为必填项'}]"
						:validate-trigger="['change','input']" >
						<a-typography-paragraph editable v-model:editText="userForm.nickName"
							style="margin-bottom: 0%;width: 37vw;">
							{{userForm.nickName}}
						</a-typography-paragraph>
					</a-form-item>
				</a-card>
				<a-card style="width: 100%;height: auto;">
					<template #title>
						<a-typography-text type="primary">
							个人签名
						</a-typography-text>
					</template>
					<a-form-item class="itemStyle" field="sign" label="个人签名" :show-colon="true"
						:validate-trigger="['change','input']">
						<a-typography-paragraph editable v-model:editText="userForm.sign"
							style="margin-bottom: 0%;width: 37vw;">
							{{userForm.sign}}
						</a-typography-paragraph>
					</a-form-item>
				</a-card>
				<a-row justify="center">
					<a-space>
						<a-button type="primary" html-type="submit" >提交</a-button>
						<a-button type="primary">取消</a-button>
					</a-space>
				</a-row>
			</a-space>
		</a-form>
	</a-card>
</template>

<script setup>
	import {
		ref,
		reactive,
		getCurrentInstance,
		onMounted,
		inject,
		watch
	} from 'vue';

	import apiUrl from '@/constant/user/apiUrl.js';
	import userApi from '@/module/user/api/index.js';
	import jwt_decode from 'jwt-decode';

	let {
		proxy
	} = getCurrentInstance();
	
	import {
		useRouter
	} from 'vue-router';
	import {
		useRoute
	} from 'vue-router';
	let router = useRouter();
	let route = useRoute();

	const props = defineProps({
		formVisible: Boolean,
		loginForm: Object
	});

	const emit = defineEmits();

	const apiUrlHome =
		import.meta.env.VITE_API_URL_HOME;

	let userForm = reactive({
		size: 'medium',
		nickName: '',
		sign: ''
	});

	let myUserForm = ref(null);
	let userInfo = reactive({});
	let updateInfoStatus = reactive({});

	async function handleSuccess(values) {
		console.log('formData', values);
		updateInfoStatus.resp = await userApi.updateSelfInfo(jwt_decode(sessionStorage.getItem("token")).uid,values);
		console.log('updateInfoStatus.resp',updateInfoStatus.resp);
		if(updateInfoStatus.resp.flag == true){
			proxy.$message.success('修改资料成功');
			nextTick(()=>{
				loadingUserInfo();
			});
		}
		else if(updateInfoStatus.resp.flag == false && updateInfoStatus.resp.message == '未修改个人资料'){
			proxy.$message.error('未修改个人资料');
		}
		else if(updateInfoStatus.resp.flag == false && updateInfoStatus.resp.message == '修改资料失败'){
			proxy.$message.error('修改资料失败');
		}
		else if(updateInfoStatus.resp.flag == false && updateInfoStatus.resp.message == '未知错误'){
			proxy.$message.error('未知错误');
		}
	}

	function resetAll() {
		myUserForm.value.resetFields();
		myUserForm.value.clearValidate();
	}
	
	if(inject('getUserInfo')){
		let userInfo = inject('getUserInfo');
		watch(userInfo,(newValue,preValue)=>{
			console.log('info',newValue.data.nickName);
			userForm.nickName = newValue.data.nickName;
			userForm.sign = newValue.data.sign;
		});
	}
	async function loadingUserInfo(){
		emit('getTab',ref(route.meta.tab));
		if(sessionStorage.getItem("token")){
			userInfo.resp = await userApi.getUserInfo(jwt_decode(sessionStorage.getItem("token")).uid);
			userInfo.data = userInfo.resp.data;
			userForm.nickName = userInfo.data.nickName;
			userForm.sign = userInfo.data.sign;
			console.log('userInfo',userInfo.data);
		}
	}

	onMounted(() => {
		document.documentElement.style.setProperty('--color-content', '#f4f4f4');
		document.documentElement.style.setProperty('--color-font', 'gray');
		loadingUserInfo();
		console.log('env',
			import.meta.env);
	});
</script>

<style lang="less" scoped>
	@import '@/assets/user/css/self.less';
</style>
